<template>
  <div class="home" style="padding: 10px">
    <!-- 搜索-->
    <div style="margin: 10px 0;">
      <el-form inline size="small">
        <el-form-item label="图书编号">
          <el-input v-model="search1" placeholder="请输入图书编号" clearable>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="图书名称">
          <el-input v-model="search2" placeholder="请输入图书名称" clearable>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="借阅者" v-if="user.role == 1">
          <el-input v-model="search3" placeholder="请输入借阅者昵称" clearable>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 1%" @click="load" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="danger" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 批量删除 -->
    <div style="margin: 10px 0;">
      <el-popconfirm title="确认删除?" @confirm="deleteBatch" v-if="user.role == 1">
        <template #reference>
          <el-button type="danger" size="mini">批量删除</el-button>
        </template>
      </el-popconfirm>
    </div>

    <!-- 表格 -->
    <el-table
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="user.role == 1" type="selection" width="55" />
      <el-table-column prop="isbn" label="图书编号" sortable />
      <el-table-column prop="bookName" label="图书名称" />
      <el-table-column prop="nickName" label="借阅者" />
      <el-table-column prop="lendtime" label="借阅时间" />
      <el-table-column prop="deadtime" label="最迟归还日期" />
      <el-table-column prop="prolong" label="可续借次数" />
      <el-table-column fixed="right" label="操作">
        <template #default="{ row }">
          <el-button size="mini" @click="handleEdit(row)" v-if="user.role == 1">修改</el-button>
          <el-popconfirm title="确认删除?" @confirm="handleDelete(row)" v-if="user.role == 1">
            <template #reference>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm
              title="确认续借(续借一次延长30天)?"
              @confirm="handlereProlong(row)"
              v-if="user.role == 2"
              :disabled="row.prolong === 0"
          >
            <template #reference>
              <el-button type="danger" size="mini" :disabled="row.prolong === 0">续借</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 & 修改弹窗 -->
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <el-dialog v-model="dialogVisible2" title="修改借阅信息" width="30%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="图书编号">
            <el-input v-model="form.isbn" style="width: 80%" />
          </el-form-item>
          <el-form-item label="图书名称">
            <el-input v-model="form.bookName" style="width: 80%" />
          </el-form-item>
          <el-form-item label="借阅者">
            <el-input v-model="form.nickName" style="width: 80%" />
          </el-form-item>
          <el-form-item label="续借次数">
            <el-input v-model="form.prolong" style="width: 80%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
import { ElMessage } from "element-plus";

export default {
  name: "bookwithuser",
  data() {
    return {
      form: {},
      dialogVisible2: false,
      search1: "",
      search2: "",
      search3: "",
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      user: {},
      forms: [],
    };
  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem("user") || "{}");
    this.load();
  },
  methods: {
    handleSelectionChange(val) {
      this.forms = val;
    },
    deleteBatch() {
      if (!this.forms.length) {
        return ElMessage.warning("请选择数据！");
      }
      request
          .post("/bookwithuser/deleteRecords", this.forms)
          .then((res) => {
            if (res.code === "0") {
              ElMessage.success("批量删除成功");
              this.load();
            } else {
              ElMessage.error(res.msg);
            }
          });
    },
    handleDelete(row) {
      request.post("/bookwithuser/deleteRecord", row).then((res) => {
        if (res.code === "0") {
          ElMessage.success("删除成功");
          this.load();
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    handlereProlong(row) {
      request
          .post("/bookwithuser/prolong", {
            id: row.id,
            isbn: row.isbn,
          })
          .then((res) => {
            if (res.code === "0") {
              ElMessage.success("续借成功");
              this.load();
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(() => {
            ElMessage.error("续借请求失败");
          });
    },
    handleEdit(row) {
      this.form = { ...row };
      this.dialogVisible2 = true;
    },
    save() {
      request.post("/bookwithuser/update", this.form).then((res) => {
        if (res.code === "0") {
          ElMessage.success("修改信息成功");
          this.load();
          this.dialogVisible2 = false;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    load() {
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        search1: this.search1,
        search2: this.search2,
        search3: this.user.role === 1 ? this.search3 : this.user.id,
      };
      request.get("/bookwithuser", { params }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    clear() {
      this.search1 = "";
      this.search2 = "";
      this.search3 = "";
      this.load();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.load();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.load();
    },
  },
};
</script>
